<template>
	<div id="classificationModelIndex">

    <el-row>
      <el-col :span="4" style="box-sizing: border-box;padding: 10px">
        <el-tree
          @node-click="treeCheck"
					ref="classificationTree"
					:data="classificationTreeData"
					node-key="classificationID"
					:props="{ children: 'children', label: 'name' }"
					:default-expand-all="true"
					:check-strictly="true"
				></el-tree>
      </el-col>
      <el-col :span="20">
        <el-row>
			<!-- 表格查询条件 -->
			<el-col :span="24">
				<el-form :inline="true" ref="stationForm" :model="queryForm">
					<el-form-item>
            <el-input v-model="queryForm.name" placeholder="型号名称/编号"></el-input>
          </el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
						<el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<!-- 数据表格 -->
			<el-col :span="24">
				<el-row>
					<el-col :span="24">
						<el-button type="primary" icon="el-icon-plus" @click="toAddModel">新增型号</el-button>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
							<el-button slot="reference" type="danger" icon="el-icon-delete">批量删除</el-button>
						</el-popconfirm>
            <span v-if="!saveOrEditData.classificationID">暂未选择分类</span>
            <span v-else>已选择分类：({{ saveOrEditData.classificationName }})</span>
					</el-col>
				</el-row>
				<el-row style="margin-top:10px;">
					<el-col :span="24">
						<el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="code" label="编号"></el-table-column>
							<el-table-column prop="name" label="岗位名称"></el-table-column>
							<el-table-column prop="uniName" label="计量单位"></el-table-column>
							<el-table-column prop="uniDesc" label="描述"></el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
									<el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="tableSizeChange"
							@current-change="tableCurrentChange"
							:current-page="pageData.page"
							:page-sizes="[10, 20, 40, 100]"
							:page-size="pageData.size"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pageData.total"
						></el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
      </el-col>
    </el-row>



		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			:title="dialog.isEdit == true ? '编辑型号' : '新增型号'"
			:visible.sync="dialog.saveOrEditDiv"
			width="30%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="80px">
        <el-form-item label="所属分类">
          <el-input v-model="saveOrEditData.classificationName" :disabled="true"></el-input>
        </el-form-item>
				<el-form-item label="型号名称" prop="name"><el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入型号名称" maxlength="10"></el-input></el-form-item>
				<el-form-item label="计量单位" prop="uniCode">
                    <gd_param type="select"
                      paramCode="unit"
                      placeholder="请选择计量单位"
                      @selectChange="unitParamChange"
                      v-model="saveOrEditData.uniCode" />
				</el-form-item>
				<el-form-item label="型号描述" prop="uniDesc">
					<el-input
					show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请对型号进行一定的描述"
						v-model="saveOrEditData.uniDesc"
					></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-input
					show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="如需备注输入描述"
						v-model="saveOrEditData.comment"
					></el-input>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
					<el-button
						@click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			title="型号详情"
			:visible.sync="dialog.showDiv"
			width="70%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
      <el-descriptions class="margin-top" :column="3"  border>
        <template slot="extra">
          <el-button
						@click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						关闭
					</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            编号
          </template>
          {{ showData.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            名称
          </template>
          {{ showData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            计量单位
          </template>
          {{ showData.uniName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            型号描述
          </template>
          {{ showData.uniDesc }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            备注
          </template>
          {{ showData.comment }}
        </el-descriptions-item>
      </el-descriptions>

		</el-dialog>


	</div>
</template>

<script>
import gd_param from "@/components/mycomponents/gd_param.vue";
import * as axiosAPI from '@/api/wms/classificationModel';
import * as classificationAxiosAPI from '@/api/wms/classification';
export default {
	name: 'classificationModelIndex',
    components:{gd_param},
	data() {
		return {
			//查询表单数据
			queryForm: {
				name: null,
        classificationID:null
			},
			//表格数据
			tableData: [],
      // 分类树形数据
      classificationTreeData:[],
			//主表-分页数据
			pageData: {
				page: 1,
				size: 10,
				total: 0
			},
			//当前表格复选数据
			nowTableSelected: [],
			//弹窗状态
			dialog: {
				isEdit: false,
				saveOrEditDiv: false,
				showDiv: false
			},
			//添加或编辑表单数据
			saveOrEditData: {
				modelID: null,
				comment: null,
				name: null,
				code: null,
				classificationID: null,
        classificationName:null,
				uniCode: null,
				uniName: null,
				uniDesc: null
			},
			//添加编辑表单-检验
			saveOrEditDataFormRules:{
				name: { required: true, message: '请输入型号名称', trigger: 'blur' },
				uniCode: { required: true, message: '请选择计量单位', trigger: 'change' },
			},
			//展示表单数据
			showData: {
				modelID: null,
				comment: null,
				name: null,
				code: null,
				classificationID: null,
				uniCode: null,
				uniName: null,
				uniDesc: null
			},
			//表单加载值
			formLoading: false
		};
	},
	mounted() {
    this.initTree();
		this.getTableDatas();
	},
	methods: {
    toAddModel(){
      if(this.saveOrEditData.classificationID){
        this.dialog.isEdit=false;
        this.dialog.saveOrEditDiv=true;
      }else{
        this.$notify.warning({
          title: '操作提示',
          message: '请选择分类后在进行添加操作'
        });
        return;
      }
    },
    // 初始化封了树数据
    initTree(){
      let _this = this;
      classificationAxiosAPI.list().then(function(res) {
					if (res.code == '0000') {
            let treeData = _this.$myUtil.list2TreeData(res.data,"-1", 'classificationID');
					  _this.classificationTreeData = treeData;
					}
				});
    },
		//查询表格数据
		getTableDatas() {
			let _this = this;
            axiosAPI.pages(_this.queryForm, _this.pageData)
				.then(function(response) {
					if (response.code == '0000') {
						_this.tableData = response.data.rows;
						_this.pageData.total = response.data.total;
					}
				});
		},
		//重置查询条件表单
		resetQueryForm() {
			this.queryForm = {
				name: null,
        classificationID:null
			};
      this.saveOrEditData.classificationName = null;
      this.saveOrEditData.classificationID = null;
			this.getTableDatas();
		},
		//重置添加、编辑、展示表单
		resetAddOrEditOrShowForm() {
			this.showData = {
				modelID: null,
				comment: null,
				name: null,
				code: null,
				classificationID: null,
				uniCode: null,
				uniName: null,
				uniDesc: null
			};
			this.saveOrEditData = {
				modelID: null,
				comment: null,
				name: null,
				code: null,
				classificationID: null,
        classificationName:null,
				uniCode: null,
				uniName: null,
				uniDesc: null
			};
		},
		//提交-添加、编辑表单
		submitSaveOrEdit() {
			let _this = this;
			this.$refs.saveOrEditDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;
                    if(_this.dialog.isEdit == true){// 编辑

                        axiosAPI.update(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });

                    }else{ // 添加
                        axiosAPI.add(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });
                    }
                }
		});
        },
		//提交-删除
		submitDelete(ids){
			let _this = this;
            axiosAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getTableDatas();
					}
				});
		},
		//分页条目数切换
		tableSizeChange(size) {
			this.pageData.size = size;
			this.getTableDatas();
		},
		//页码切换
		tableCurrentChange(page) {
			this.pageData.page = page;
			this.getTableDatas();
		},
		//行-查看
		rowShow(data) {
			this.showData = JSON.parse(JSON.stringify(data));
			this.dialog.showDiv = true;
		},
		//行-编辑
		rowEdit(data) {
			this.dialog.saveOrEditDiv = true;
			this.saveOrEditData = JSON.parse(JSON.stringify(data));
			this.dialog.isEdit = true;
		},
		//行-删除
		rowDelete(data) {
			this.$confirm('确定要删除这行数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitDelete(data.modelID);
			});
		},
		//点击批量删除
		moreDeletes() {
			if(this.nowTableSelected.length<=0){
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}
			let ids = '';

			for (var i in this.nowTableSelected) {
				ids += this.nowTableSelected[i].modelID + ',';
			}

			ids = ids.substring(0, ids.length - 1);

			//调用删除
			this.submitDelete(ids);
		},
		//表格批量选择
		tableDataSelected(data){
			this.nowTableSelected = data;
		},
    // 计量单位切换
    unitParamChange(data){
       if(data == undefined){
          this.saveOrEditData.uniCode = null;
          this.saveOrEditData.uniName = null;
       }else{
         this.saveOrEditData.uniCode = data.dataValue;
          this.saveOrEditData.uniName = data.dataName;
       }
    },
    // 树形节点被点击
    treeCheck(data){
       this.saveOrEditData.classificationID = data.classificationID;
       this.saveOrEditData.classificationName = data.name;
       this.queryForm.classificationID = data.classificationID;
       this.getTableDatas();
    }

	}
};
</script>

<style scoped></style>
